<!-- TableRow 组件 -->
<template>
	<view class="tr">
		<view class="table-row"> 
			<view class="table-cell sticky-left-cell" v-if="selectable">
				<MyCheckbox @change="selectRow(row)" :checked="selectedRows.includes(row)" />
			</view>
			<!-- 行数据 -->
			<view class="table-cell" :class="[`sticky-${column.fixed}-cell`]" v-for="(column, index) of columns"
				:key="index">
				<!-- 自定义操作列 -->
				<slot name="operate" v-if="column.key === 'operate'" :data="row"></slot>
				<!-- 默认显示行数据内容 -->
				<template v-else-if="index===0">
					<view class="home-td" :style="[{'padding-left':`${row.level*10}px`}]"
						@click="$emit('toggleChildren', row)">
						<view class="row-expand"
							:class="[{'row-collapsed':!row.showChildren,'visibility':!row.children||row.children.length===0}]">
						</view>
						{{ row[column.key] }}
					</view>
				</template>
				<template v-else>
					{{ row[column.key] }}
				</template>
			</view>
		</view>
		<!-- 递归调用 TableRow 组件 -->
		<TableRow  v-show="row.showChildren" v-for="childRow in row.children" :row="childRow" :columns="columns"
			:selectable="selectable" :selectedRows="selectedRows" :key="childRow.id" @toggleChildren="toggleChildren"
			@selectRow="selectRow"> 
			<template #operate="{ data }">
				<slot name="operate" :data="data"></slot>
			</template>
		</TableRow>
	</view>
</template>

<script>
	import MyCheckbox from '@/components/MyCheckbox.vue'
	export default {
		name: 'TableRow',
		components: {
			MyCheckbox,
		},
		props: {
			row: {
				type: Object,
				required: true
			},
			columns: {
				type: Array,
				required: true
			},
			selectable: {
				type: Boolean,
				required: false
			},
			selectedRows: {
				type: Array,
				required: true
			}
		},
		methods: {
			toggleChildren(row) {
				this.$set(row, 'showChildren', !row.showChildren);
			},
			selectRow(row) {
				this.$emit('selectRow', row)
			},
		}
	}
</script>

<style scoped>
	.tr {
		display: contents;
	}

	.table-row {
		display: table-row;
	}

	.table-cell {
		display: table-cell;
		flex: 1;
		padding: 10px;
		border-left: 1px solid gainsboro;
		border-bottom: 1px solid gainsboro;
		box-sizing: border-box;
		text-align: center;
		align-items: center;
		vertical-align: middle;
		user-select: all;
	}

	.table-cell:first-child {
		border-right: 0.1px solid gainsboro;
	}

	.table-cell:last-child {
		border-right: 1px solid gainsboro;
		user-select: none;
	}

	.sticky-left-cell,
	.sticky-right-cell,
	.sticky-top-cell {
		position: sticky;
		background-color: #fff;
	}

	.sticky-left-cell {
		left: 0;
		z-index: 997;
	}

	.sticky-left-cell::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: -1px;
		width: 30px;
		transform: translateX(100%);
		transition: box-shadow 0.3s;
		content: "";
		pointer-events: none;
		box-shadow: inset 10px 0 8px -8px rgb(5 5 5 / 6%);
		box-sizing: border-box;
	}

	.sticky-right-cell {
		right: 0;
		z-index: 997;
	}

	.sticky-right-cell::after {
		position: absolute;
		top: 0;
		bottom: -1px;
		left: 0;
		width: 30px;
		transform: translateX(-100%);
		transition: box-shadow 0.3s;
		content: "";
		pointer-events: none;
		box-shadow: inset -10px 0 8px -8px rgb(5 5 5 / 6%);
		box-sizing: border-box;
	}

	.sticky-top-cell {
		top: 0;
		z-index: 998;
	}

	.sticky-top-cell::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: -1px;
		width: 30px;
		transform: translateX(100%);
		transition: box-shadow 0.3s;
		content: "";
		pointer-events: none;
		box-shadow: inset 10px 0 8px -8px rgb(5 5 5 / 6%);
		box-sizing: border-box;
	}

	.row-expand {
		color: inherit;
		text-decoration: none;
		outline: none;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;
		float: left;
		box-sizing: border-box;
		width: 17px;
		height: 17px;
		padding: 0;
		line-height: 17px;
		background: #ffffff;
		border: 1px solid #f0f0f0;
		border-radius: 6px;
		transform: scale(0.9411764705882353);
		user-select: none;
		margin-top: 2.5px;
		margin-inline-end: 8px;
	}

	.row-expand::before,
	.row-expand::after {
		position: absolute;
		background: currentcolor;
		transition: transform 0.3s ease-out;
		content: "";
		box-sizing: border-box;
	}

	.row-expand::before {
		top: 7px;
		inset-inline-end: 3px;
		inset-inline-start: 3px;
		height: 1px;
	}

	.row-expand::after {
		top: 3px;
		bottom: 3px;
		inset-inline-start: 7px;
		width: 1px;
		transform: rotate(90deg);
	}

	.row-collapsed::after {
		transform: rotate(0deg);
	}

	.home-td {
		text-align: left;
		display: flex;
		user-select: none;
	}

	.visibility {
		visibility: hidden;
	} 
</style>